<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>字计数器</title>

<style>
    .counter-holder{
        width: 300px;
        position: relative;
    }
    .counter-holder textarea{
        display: block;
        width: 300px;
        height: 200px;
        resize: none;
    }
    .counter-holder .num-show{
        position: absolute;
        right: 0;
        bottom: 0;
    }
</style>
</head>
<body>
    <div class="counter-holder">
        <textarea name="word" id="word"></textarea>
        <p class="num-show" id="num-show">还可以输入 <em>100</em> 个字</p>
    </div>
    <p><span id="test">我是可以修改的</span><input id="test1" type="text" value="我是可以修改的" style="border:0;height: 30px;display:none;"></p>
<script>
    var test = document.getElementById('test');
    var test1 = document.getElementById('test1');

    test.onclick = function(){
        this.style.display = "none";
        test1.style.display = "inline-block";
    };
    test1.onblur = function(){
        this.style.display = "none";
        test.innerHTML = this.value;
        test.style.display = "inline-block";
    };

    var word = document.getElementById('word');
    var show = document.getElementById('num-show');

    word.onkeydown = word.onkeyup = word.onfocus = word.onblur = function(){
        var length = 100 - this.value.length;
        if( length < 0 ){
            this.value = this.value.substring(0,100);
            length = 0;
        }
        show.innerHTML = '还可以输入 <em>' +length+ '</em> 个字';
    };
</script>
</body>
</html>